<script lang="ts" setup>
import ExViewer from '../ExViewer.vue';
import { EXAMPLE_ROUTES_CHILDREN } from '@/router';

const LIST_NAME = '本地示例';
const DEFAULT_TITLE = '未命名示例';

const router = useRouter();
const route = useRoute();

const showList = ref(true);
</script>

<template>
  <!-- 示例列表 -->
  <div class="flex h-full w-full">
    <div v-show="showList" class="flex h-full w-1/5 flex-col overflow-y-auto">
      <span class="overflow-hidden overflow-ellipsis whitespace-nowrap border-b px-4 py-2 text-2xl">
        {{ LIST_NAME }}
      </span>

      <div class="h-full overflow-y-auto pt-4">
        <!-- 从示例路由中获取 -->
        <div
          v-for="exRoute in EXAMPLE_ROUTES_CHILDREN"
          :key="exRoute.name"
          :class="[
            'ex-list-item mx-4 mb-2 cursor-pointer rounded-sm border border-sky-700 p-2 last:mb-0',
            route.name === exRoute.name && 'active',
          ]"
          @click="router.replace(exRoute.path)"
        >
          <!-- 标题 -->
          <div
            :title="exRoute.meta.title || DEFAULT_TITLE"
            class="overflow-hidden overflow-ellipsis whitespace-nowrap text-xl"
          >
            {{ exRoute.meta.title || DEFAULT_TITLE }}
          </div>

          <!-- 描述 -->
          <div
            v-if="exRoute.meta.desc"
            :title="exRoute.meta.desc"
            class="desc mt-2 overflow-hidden border-t border-sky-700 pt-2 text-gray-800"
          >
            {{ exRoute.meta.desc }}
          </div>
        </div>
      </div>
    </div>

    <!-- Viewer 功能块 -->
    <div class="w-full">
      <ExViewer class="relative">
        <button
          class="absolute top-10 z-10 h-10 w-10 rounded-r-full bg-slate-300/25 text-white hover:bg-sky-700"
          @click="showList = !showList"
        >
          <div :class="['mt ml-4 h-4 w-4 -rotate-135 border-t-2 border-r-2', showList || 'ml-2 rotate-45']" />
        </button>
        <router-view class="absolute right-0 z-10" />
      </ExViewer>
    </div>
  </div>
</template>

<style scoped>
.ex-list-item {
  &.active,
  &:hover {
    @apply border-sky-600 outline outline-2 outline-sky-700;
  }

  .desc {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
  }
}
</style>

<style>
@import '@assets/style/tailwind.css';
@import '@assets/style/preset.pcss';
</style>
